<template>
  <div id="body">
    <div id="all">
      <van-loading text-color="#ffc456" color="#ffc456" vertical v-if="loading"
        >加载中...</van-loading
      >
      <div class="starItem" v-for="(item, index) in data" :key="index">
        <div><img :src="item.image" alt="" /></div>
        <div class="one">
          <div><van-text-ellipsis :content="item.title" :rows="2" /></div>
          <div class="go">
            <div>{{ item.integral }}积分</div>
            <div @click="target(item)">兑 换</div>
          </div>
        </div>
      </div>
      <van-empty description="暂无收藏" v-if="!loading && !data.length" />
    </div>
  </div>
</template>

<script setup>
import { useIntegrallist } from '@/stores/integralList.js' // 导入名为useIntegrallist的自定义钩子函数，用于获取积分列表的Store对象
import { useUserInfoStore } from '@/stores/user.js' // 导入名为useUserInfoStore的自定义钩子函数，用于获取用户信息的Store对象
import { storeToRefs } from 'pinia' // 导入storeToRefs函数，用于将Store对象的属性转换为响应式数据
import { ref } from 'vue' // 导入ref函数，用于创建响应式变量
import { baseURL, homeListss } from '../api' // 导入baseURL和homeListss接口函数
import router from '../router' // 导入Vue Router实例

const userInfoStore = useUserInfoStore() // 调用useUserInfoStore钩子函数创建名为userInfoStore的用户信息Store对象
const { curStudent } = storeToRefs(userInfoStore) // 使用storeToRefs将userInfoStore的curStudent属性转换为响应式数据，并赋值给curStudent变量
const integrallist = useIntegrallist() // 调用useIntegrallist钩子函数创建名为integrallist的积分列表Store对象
const data = ref([]) // 创建名为data的响应式变量，初始值为空数组
const loading = ref(true) // 创建名为loading的响应式变量，初始值为true

function target(item) { // 定义名为target的函数，用于跳转至商品详情页
  integrallist.getCur(item) // 调用integrallist的getCur方法，传递item参数
  router.push('/goodsDetail') // 通过router进行页面跳转，跳转至'/goodsDetail'路径
}

;(async function () { // 创建一个立即执行的异步函数
  try {
    loading.value = true // 将loading的值设置为true，表示正在加载中
    const res = await homeListss({ user_id: curStudent?.value?.id }) // 使用homeListss接口函数，传递user_id参数，并等待返回结果
    data.value = res.map((item) => { // 对返回的结果进行处理，将图片URL拼接基础URL
      item.image = baseURL + item.image
      return item
    })
    loading.value = false // 将loading的值设置为false，表示加载完成
  } catch (error) {
    loading.value = false // 异常情况下，将loading的值设置为false
  }
})()

</script>

<style lang="less" scoped>
@var1: #ff462a;
@var2: #ffc456;
@var3: #f5f6f8;
@var4: #ffffff;

.one {
  width: 65%;
  > div:first-child {
    font-weight: 900;
    font-size: 14px;
  }
}
.go {
  margin-top: 35px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  > div:first-child {
    color: @var1;
    font-size: 14px;
    font-weight: 900;
  }
  > div:last-child {
    color: white;
    background-color: @var2;
    padding: 0.3vh 22px;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 900;
  }
}
#body {
  background-color: @var3;
  height: 100vh;
}
#all {
  padding-top: 2vh;
  width: 94%;
  margin-left: 3%;
}
.starItem {
  padding: 1rem;
  display: flex;
  background-color: @var4;
  margin-bottom: 2vh;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  img {
    width: 100px;
    height: 100px;

    border-radius: 10px;
  }
}
</style>
